import React, { Component, Fragment } from 'react';
import styles from './InterviewResult.less';
import {
  LeftOutlined
} from '@ant-design/icons';
import { Row, Col, Button, notification } from 'antd';
import { history } from 'umi';
import request from '@/utils/request'
import moment from 'moment'
import PublicUtils from "@/utils/publicUtils";
import pendUser from '@/assets/pendUser.png';


export default class pendingEmploymentDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: '候选人详情',
      staffId: '',
      userInfo: JSON.parse(window.localStorage.getItem('userInfo')),
    }
  }

  componentDidMount() {
    const queryParams = new URLSearchParams(history.location.search);
    const staffId = queryParams.get('staffId');
    this.setState({
      staffId: staffId,
      isJoinData: {}
    }, () => {
      this.getDetails(staffId)
    })
  }

  //获取待入职详情
  getDetails = async (staffId) => {
    const res = await request.get('/staff/onboardingManagementDetail', {
      params: {
        staffId
      }
    });
    if (res && res.error_code === 200) {
      const result = !res.data ? {} : res.data
      this.setState({
        isJoinData: { ...result },
      })
    } else {
      notification.error({
        message: res ? res.error_msg : '请求错误'

      })
    }
  }


  // 是否是数据的招聘负责人或直属上级
  staffPermJud = () => {
    const { userInfo } = this.state;
    let isPerm = false;
    let recruitId = isJoinData.recruitId; // 招聘负责人
    let leaderId = isJoinData.leaderId; // 直属上级
    let userId = userInfo.staffId;
    if (recruitId == userId || leaderId == userId) {
      isPerm = true;
    }
    return isPerm
  }

  // 新增反馈面试结果
  resultAdd = () => {
    const { staffId } = this.state;
    history.push('/recruit/interviewfeedbackMobile' + '?staffId=' + staffId);
  }

  //放弃入职
  abandon = () => {
    const { staffId } = this.state;
    history.push('/recruit/interviewabandonMobile' + '?staffId=' + staffId);
  }


  render() {
    const {
      title,
      isJoinData
    } = this.state;

    return (
      <div className={styles.contain}>
        <div className={styles.headerTitle}>
          <Row style={{ width: '100%', height: '100%', justifyContent: 'center', alignItems: 'center' }}>
            <Col style={{ marginLeft: '20px', fontSize: '18px', color: '#409EFF' }} onClick={() => history.go(-1)}>
              <LeftOutlined style={{ fontSize: '20px', color: '#409EFF' }} />返回
            </Col>
            <Col offset={20} style={{ marginLeft: '25px', flexGrow: 1 }}>
              <div style={{ fontSize: '18px', color: '#333333', fontWeight: 'bold' }}>{title}</div>
            </Col>
          </Row>
        </div>
        <div className={`${styles.context}`}>
          <div className={styles.baseName}>
            <div className={styles.name}>{isJoinData?.staffName}</div>
            <div className={styles.develName}>{isJoinData?.staffJobName}{' / ' + isJoinData?.levelName}</div>
            <div className={styles.icon} style={{ position: 'relative' }}>
              <img src={pendUser} alt="pendUser" style={{ width: '40px', height: '35px' }}></img>
              <div style={{ fontSize: '18px', height: '35px', display: 'flex', alignItems: 'center' }}>待入职</div>
              <div style={{ position: 'absolute', right: '0', display: 'flex', alignItems: 'center' }}>
                {PublicUtils.checkAuth("2020599_PERMS") && this.staffPermJud && <Button onClick={() => this.resultAdd()} style={{ backgroundColor: '#409EFF', color: '#fff', borderRadius: '15px' }}>编辑</Button>}
                {PublicUtils.checkAuth("2020600_PERMS") && this.staffPermJud && <Button onClick={() => this.abandon()} style={{ backgroundColor: '#409EFF', color: '#fff', borderRadius: '15px', marginLeft: '10px' }}>放弃</Button>}
              </div>
            </div>
          </div>
          <div className={styles.baseInfo}>
            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>基本信息</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>姓名</Col>
                <Col span={16}>{isJoinData?.staffName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>联系方式</Col>
                <Col span={16}>{isJoinData?.phoneNum}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>员工类别</Col>
                <Col span={16}>{PublicUtils.getStaffType(isJoinData?.staffType)}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>职务/技能</Col>
                <Col span={16}>{isJoinData?.staffJobName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>职级/级别</Col>
                <Col span={16}>{isJoinData?.levelName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>入职日期</Col>
                <Col span={16}>{isJoinData?.joinTime ? moment(isJoinData?.joinTime).format('YYYY-MM-DD') : ''}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>试用期限</Col>
                <Col span={16}>{isJoinData?.probationMonthNum ? isJoinData.probationMonthNum + '月' : ''}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>协议/合同期限</Col>
                <Col span={16}>{isJoinData?.contractYearNum ? isJoinData.contractYearNum + '年' : ''}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>工作地区</Col>
                <Col span={16}>{isJoinData?.workLocale}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>部门</Col>
                <Col span={16}>{isJoinData?.deptName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>直属上级</Col>
                <Col span={16}>{isJoinData?.leaderName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>招聘人</Col>
                <Col span={16}>{isJoinData?.recruitName}</Col>
              </Row>
            </div>

            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>薪资信息</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>转正前薪资</Col>
                <Col span={16}>{isJoinData?.interviewSalaryRes?.beforeSalary}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>转正后薪资</Col>
                <Col span={16}>{isJoinData?.interviewSalaryRes?.afterSalary}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>工资卡银行</Col>
                <Col span={16}>{isJoinData?.interviewSalaryRes?.bankName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>五险一金缴纳机构</Col>
                <Col span={16}>{isJoinData?.interviewSalaryRes?.socialAgencyName}</Col>
              </Row>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col span={8}>五险一金缴纳方式</Col>
                <Col span={16}>{isJoinData?.interviewSalaryRes?.paymentMethodName}</Col>
              </Row>
            </div>
            <div className={styles.entryDetails}>
              <Row style={{ height: '50px', display: 'flex', alignItems: 'center' }}>
                <Col style={{ fontSize: '18px', fontWeight: 'bold' }}>备注</Col>
              </Row>
              <div style={{ lineHeight: '2' }}>
              {isJoinData?.description}
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }

}